<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    :isDetail="false"
    :width="getIsMobile ? '95%':'80%'"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" class="flex">
      <template #tag="{ model, field }">
        <div v-for="(item, index) in model.tag" :key="index">   
          <Row :gutter="24" class="mb-4" >
            <Col :span="12">
              <FormItem :name="field+'src'+index" label=" " colProps="{ xs: 24, xl: 12, lg: 8, xxl: 6 }" :rules="[{ required: false }]">
                <ImageUpload :api="uploadApi" class="bigimg" v-model:value="item.src" />
              </FormItem>
            </Col>
            <Col :span="10" class="pl-2">
              <div>
                <FormItem :name="field+'_title'+index" label="标题" colProps="{ xs: 24, xl: 12, lg: 8, xxl: 6 }" :rules="[{ required: false }]">
                  <a-input
                    v-model:value="item.title"
                    placeholder="请输入幻灯片标题"
                  />
                </FormItem>
                <FormItem :name="field+'_href'+index" label="链接" colProps="{ xs: 24, xl: 12, lg: 8, xxl: 6 }" :rules="[{ required: false }]">
                  <a-input
                    v-model:value="item.href"
                    placeholder="请输入链接地址"
                  />
                </FormItem>
              </div>
            </Col>
            <Col :span="2" >
                <a-button type="primary" size="small" v-if="index == 0" @click="batchAdd(model.tag)">+</a-button>
                <a-button size="small" danger v-if="index > 0" @click="() => del(model.tag,index)">-</a-button>
              </Col>
          </Row>
          <!-- <Row :gutter="24" class="mb-4" >
            <Col :span="12">
              <ImageUpload :api="uploadApi" class="bigimg" v-model:value="item.src" />
            </Col>
            <Col :span="10" class="pl-2">
              <div>
                <a-input placeholder="标题" v-model:value="item.title"/>
              </div>
              <div class="mt-8">
                <a-input placeholder="链接地址" v-model:value="item.href"/>
              </div>
            </Col>
            <Col :span="2" >
              <a-button type="primary" size="small" v-if="index == 0" @click="batchAdd">+</a-button>
              <a-button size="small" danger v-if="index > 0" @click="() => del(index)">-</a-button>
            </Col>
          </Row>         -->
        </div>
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive } from 'vue';
  import { useAppInject } from '@/hooks/web/useAppInject';
  import { Row, Col,FormItem } from 'ant-design-vue';
  import { BasicForm, useForm } from '@/components/Form';
  import { formSchema } from './carousel.data';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { ImageUpload } from '@/components/Upload';
  import { uploadApi } from '@/api/sys/upload';
  import { getMenuList } from '@/api/demo/system';

  const { getIsMobile } = useAppInject();
  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);

  // const treeData = ref<TreeItem[]>([]);
  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
    labelWidth: 100,
    actionColOptions: { span: 24 },
    baseColProps: { span: 8 },

    schemas: formSchema,
    showActionButtonGroup: false,
  });

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    resetFields();
    setDrawerProps({ confirmLoading: false });
    // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
    // if (unref(treeData).length === 0) {
    //   treeData.value = (await getMenuList()) as any as TreeItem[];
    // }
    isUpdate.value = !!data?.isUpdate;

    if (unref(isUpdate)) {
      setFieldsValue({
        ...data.record,
      });
    }
  });

  const getTitle = computed(() => (!unref(isUpdate) ? '新增轮播图' : '编辑轮播图'));

  async function handleSubmit() {
    // setFieldsValue({ tag: JSON.stringify(state.nodes) });
    try {
      const values = await validate();
      setDrawerProps({ confirmLoading: true });
      // TODO custom api
      console.log(JSON.stringify(values));
      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }

  function batchAdd(item) {
     item.push({src:[], title: '', href: ''});
  }

  function del(item,field: number) {
    item.splice(field, 1);
  }

</script>
<style>
  .ant-tag.large {
    padding: 5px 12px;
  }

  .bigimg{
    width: 100%;
  }

  .bigimg .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container {
    width: 100% !important; 
  }
</style>
